<template>
  <div class="twoMenu">
    <h1>个人信息</h1>

    <div class="info">
      <div class="msg">
        <p class="name">昵称<span @click="modify">修改</span></p>
        <span>{{ form.username }}</span>
      </div>
      <div class="msg2">
        <p class="name">收货地址<span @click="modify02">修改</span></p>
        <span>{{ form.addressee }}</span
        >&nbsp;&nbsp; <span>{{ form.phone }}</span
        ><br />
        <span>{{ form.region }}</span
        ><br />
        <span>{{ form.address }}</span
        ><br />
      </div>

      <el-dialog title="修改昵称" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onsubmit">保存</el-button>
          <el-button type="primary" class="btn" @click="closs">取消</el-button>
        </div>
      </el-dialog>

      <el-dialog title="收货地址" :visible.sync="visible">
        <el-form :model="form">
          <el-form-item label="收件人" :label-width="formLabelWidth">
            <el-input v-model="form.addressee" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所在地区" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="北京" value="北京"></el-option>
              <el-option label="上海" value="上海"></el-option>
              <el-option label="江苏" value="江苏"></el-option>
              <el-option label="安徽" value="安徽"></el-option>
              <el-option label="四川" value="四川"></el-option>
              <el-option label="西藏" value="西藏"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" type="textarea"></el-input>
          </el-form-item>
          <div class="checkbox">
            <el-checkbox class="check1"> </el-checkbox>
            <span
              >允许腾讯课堂收集您的地址和手机号，并将上述信息分享给需要寄送实物资料的机构，以保证机构可将教学资料寄送给您</span
            >
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onsubmit">保存</el-button>
          <el-button type="primary" class="btn" @click="closs">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [],
      visible: false,
      dialogFormVisible: false,
      form: {
        username: "法外狂徒",
        addressee: "法外狂徒",
        phone: "1378893057",
        region: "北京",
        address: "皇城",
      },
      formLabelWidth: "120px",
      username: "法外狂徒",
      addressee: "",
      phone: "",
      region: "",
      address: "",
    };
  },
  created() {
    // 组件创建之初，应该立即vuex，从vuex中获取用户信息，显示到页面
    this.form.username = this.$store.state.user.username;
    this.form.addressee = this.$store.state.user.addressee;
    this.form.phone = this.$store.state.user.phone;
    this.form.region = this.$store.state.user.region;
    this.form.address = this.$store.state.user.address;
  },
  methods: {
    modify() {
      // 显示注册表单
      this.dialogFormVisible = true;
    },
    modify02() {
      // 显示注册表单
      this.visible = true;
    },
    closs() {
      this.dialogFormVisible = false;
      this.visible = false;
    },
    onsubmit() {
      this.username = this.form.username;
      this.addressee = this.form.addressee;
      this.phone = this.form.phone;
      this.region = this.form.region;
      this.address = this.form.address;

      this.dialogFormVisible = false;
      this.visible = false;
      this.$message({
        message: "修改成功！",
        type: "success",
      });

      // const d = new Date();
      // d.setDate(d.getDate() + 30);
      // document.cookie = "username=${data.username};expires=" + d;
      // console.log()
      // 登录成功后，将登录成功产生的信心，保存到状态管理器（vuex）中，以便将来在其他组件中使用
      this.$store.commit("user/set_username", this.username);
      // this.set_isLogin("ok");
      this.$store.commit("user/set_addressee", this.addressee);
      // this.set_username(data.username);
      this.$store.commit("user/set_phone", this.phone);
      // this.set_password(tools.getCookie("token_pass"))
      this.$store.commit("user/set_region", this.region);
      this.$store.commit("user/set_address", this.address);
      // 登录成功后，修改视图上的用户名信息
      this.username = this.$store.state.user.username;
    },
  },
};
</script>

<style lang="less" >
.twoMenu {
  position: relative;
  width: 800px;
  height: 1300px;

  h1 {
    font-size: 24px;
    font-weight: normal;
  }

  .info {
    width: 800px;
    height: 600px;
    background: #fff;
    margin-top: 30px;
    overflow: hidden;
    padding: 0 40px;

    .msg {
      border-bottom: 1px solid #ccc;
      padding: 40px 0;
      height: 50px;
    }

    .msg2 {
      border: 0;
      margin-top: 40px;
    }

    .name {
      font-size: 20px;
      font-weight: normal;
      margin-bottom: 20px;

      span {
        margin-left: 10px;
        font-size: 16px;
        color: rgb(99, 171, 171);
        cursor: pointer;
      }
    }
    .el-dialog {
      width: 600px !important;
      // background: #ccc;

      .el-form {
        width: 400px;
        .checkbox {
          display: flex;
          margin-left: 50px;
          width: 450px;
          .check1 {
            display: block;
          }
          span {
            // border: 1px solid red;
            margin-left: 10px;
            display: block;
            // width: 400px;
          }
        }
      }

      .btn {
        background: #ccc;
        border: 0;
      }
    }
  }
}
</style>